<template>
  <div class="q-pa-md">
    <div>
      Switch to another browser tab or app then come back here to see some
      changes.
    </div>

    <t-markup-table v-if="eventList.length > 0" class="q-mt-md">
      <tbody>
        <tr v-for="evt in eventList" :key="evt.timestamp">
          <td>{{ evt.timestamp }}</td>
          <td>{{ evt.label }}</td>
        </tr>
      </tbody>
    </t-markup-table>
  </div>
</template>

<script>
  import { useQuasar } from '@teld/q-components';
  import { ref, watch } from 'vue';

  function pad(number) {
    return (number < 10 ? '0' : '') + number;
  }

  export default {
    setup() {
      const $q = useQuasar();
      const eventList = ref([]);

      watch(
        () => $q.appVisible,
        state => {
          const date = new Date();
          eventList.value.unshift({
            timestamp:
              pad(date.getHours()) +
              ':' +
              pad(date.getMinutes()) +
              ':' +
              pad(date.getSeconds()) +
              '.' +
              date.getMilliseconds(),
            label: `App became ${state ? 'visible' : 'hidden'}`,
          });
        },
      );

      return {
        eventList,
      };
    },
  };
</script>
